<template>
    <!-- 最大盒子 -->
    <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="'筛选职位'" :autoBack="true" leftIconColor="$uni-text-color" :bgColor="'#ffffff'" :titleStyle="{  color:'$uni-text-color',fontSize:'32rpx',fontWeight:'600' }">
        <view class="max_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px'}">
            <!-- 左侧一级分类 -->
            <view class="classification_box" :style="{ height:`calc(100vh - ${safeAreaInsets?.top}px - 44px - 72px)` }">
                <!-- 分类每一项 -->
                <view @tap="categorySelection(item)" :class="Primary_selection == item.value ? 'classification_item_checked' : 'classification_item'" v-for="(item,index) of virtualDataList" :key="index">
                    <view class="regulation"></view>
                    {{ item.name }}
                </view>
                <!-- <view class="classification_item">学历</view> -->
            </view>
            <!-- 右侧列表 -->
            <view class="list_box" :style="{ height:`calc(100vh - ${safeAreaInsets?.top}px - 44px - 72px)` }">
                <!-- 列表每一项 -->
                <scroll-view scroll-y :scroll-into-view="'scan'+goindex">
                    <view class="list_item" v-for="(c,v) of rightList" :key="v" :id="'scan'+v">
                        <view class="list_title list_padding">{{ c.title }}</view>
                        <!-- 选项盒子 -->
                        <view>
                            <view :class="list_checked_array[v] == a.name ? 'list_option_checked' : 'list_option'" v-for="(a,b) of c.optional" :key="b" @tap="listChoose(a,v)">{{ a.name }}</view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>

        <!-- 底部按钮 -->
        <view>
            <!-- <s-button @netWork="deterministicScreening" :text="'确定'"></s-button> -->
            <s-button @leftNetWork="reset" @rightNetWork="deterministicScreening"  :leftWidth="'30%'" :rightWidth="'70%'" :type="'twobutton'" :oneText="'重置'" :twoText="'确定'" />
        </view>
    </s-layout>
</template>
<script setup>
    import { baseUrl } from '@/sheep/config';
    import { onLoad,onShow } from "@dcloudio/uni-app";
    import { reactive, ref,computed  } from "vue";
    import tools from '@/sheep/helper/tools.js';
    import sheep from "@/sheep";
    // 获取系统信息
    const { safeAreaInsets }  = uni.getSystemInfoSync();

    onLoad((option) => {
        
    });

    // 虚拟数据 左侧一级分类数据
    const virtualDataList = ref([
        {
            name:'职位推荐',
            value:0
        },
        {
            name:'学历',
            value:1
        },
        {
            name:'薪资',
            value:2
        },
        {
            name:'经验',
            value:3
        },
        {
            name:'行业',
            value:4
        },
        {
            name:'公司规模',
            value:5
        },
        {
            name:'融资',
            value:6
        },
        {
            name:'福利待遇',
            value:7
        },
    ])
    // 左侧一级分类 选中的值
    const Primary_selection = ref(0)
    const goindex = ref(0)
    // 分类选择
    const categorySelection = (item) => {
        Primary_selection.value = item.value
        goindex.value = item.value
    }

    // 虚拟数据 右侧列表数据  '全部','初中及以下','中专','高中','大专','本科','硕士','博士'
    const rightList = ref([
        {
            title:'职位推荐',
            optional:[
                { name:'全部',value:0 },
                { name:'初中及以下',value:1 },
                { name:'中专',value:2 },
                { name:'高中',value:3 },
                { name:'大专',value:4 },
                { name:'本科',value:5 },
                { name:'硕士',value:6 },
                { name:'博士',value:7 },
            ]
        },
        {
            title:'学历',
            optional:[
                { name:'全部',value:0 },
                { name:'3000元以下',value:1 },
                { name:'3000-5000元',value:2 },
                { name:'5000-7000元',value:3 },
                { name:'7000元-9000元',value:4 },
                { name:'9000元-12000元',value:5 },
                { name:'1.2万元以上',value:6 },
            ]
        },
        {
            title:'薪资',
            optional:[
                { name:'全部',value:0 },
                { name:'在校生',value:1 },
                { name:'应届生',value:2 },
                { name:'1年以内',value:3 },
                { name:'1~3年',value:4 },
                { name:'3~4年',value:5 },
                { name:'4~6年',value:6 },
                { name:'6年以上',value:7 },
            ]
        },
        {
            title:'经验',
            optional:[
                { name:'全部',value:0 },
                { name:'初中及以下',value:1 },
                { name:'中专',value:2 },
                { name:'高中',value:3 },
                { name:'大专',value:4 },
                { name:'本科',value:5 },
                { name:'硕士',value:6 },
                { name:'博士',value:7 },
            ]
        },
        {
            title:'行业',
            optional:[
                { name:'全部',value:0 },
                { name:'3000元以下',value:1 },
                { name:'3000-5000元',value:2 },
                { name:'5000-7000元',value:3 },
                { name:'7000元-9000元',value:4 },
                { name:'9000元-12000元',value:5 },
                { name:'1.2万元以上',value:6 },
            ]
        },
        {
            title:'公司规模',
            optional:[
                { name:'全部',value:0 },
                { name:'在校生',value:1 },
                { name:'应届生',value:2 },
                { name:'1年以内',value:3 },
                { name:'1~3年',value:4 },
                { name:'3~4年',value:5 },
                { name:'4~6年',value:6 },
                { name:'6年以上',value:7 },
            ]
        },
        {
            title:'融资',
            optional:[
                { name:'全部',value:0 },
                { name:'初中及以下',value:1 },
                { name:'中专',value:2 },
                { name:'高中',value:3 },
                { name:'大专',value:4 },
                { name:'本科',value:5 },
                { name:'硕士',value:6 },
                { name:'博士',value:7 },
            ]
        },
        {
            title:'福利待遇',
            optional:[
                { name:'全部',value:0 },
                { name:'3000元以下',value:1 },
                { name:'3000-5000元',value:2 },
                { name:'5000-7000元',value:3 },
                { name:'7000元-9000元',value:4 },
                { name:'9000元-12000元',value:5 },
                { name:'1.2万元以上',value:6 },
            ]
        }
    ])
    // 右侧列表 选中的值
    const list_checked_array = ref(['全部','全部','全部'])
    // 列表选择
    const listChoose = (item,v) => {
        list_checked_array.value.splice(v,1,item.name)
    }

    // 确定筛选
    const deterministicScreening = () => {

    }
    
    // 重置按钮
    const reset = () => [
        list_checked_array.value = ['全部','全部','全部']
    ]
</script>
    
<style scoped lang="scss">
    page {
        width: 100%;
        height: 100%;
    }

    // 最大盒子
    .max_box {
        display: flex;
        // 左侧一级分类
        .classification_box {
            width: 212rpx;
            background-color: #ffffff;
            // 分类每一项(选中)
            .classification_item_checked {
                height: 100rpx;
                background-color: #F4F6FA;
                font-family: PingFangSC;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
                font-size: $uni-font-size-base;
                font-style: normal;
                text-decoration: none;
                text-align: center;
                line-height: 100rpx;
                position: relative;
                // 选中左边条条
                .regulation {
                    position: absolute;
                    left: 0;
                    width: 10rpx;
                    height: 100%;
                    background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
                }
            }
            // 分类每一项(未选中)
            .classification_item {
                height: 100rpx;
                background-color: #ffffff;
                font-family: PingFangSC;
                color: #666666;
                font-weight: $uni-font-weight;
               font-size:$uni-font-size-26;
                font-style: normal;
                text-decoration: none;
                text-align: center;
                line-height: 100rpx;
            }
        }
        // 右侧列表盒子
        .list_box {
            width: calc(100% - 212rpx);
            background-color: #F4F6FA;
            scroll-view {
                height: 100%;
            }
            // 列表每一项
            .list_item {
                // 内边距
                .list_padding {
                    padding: 0 18rpx 0 20rpx;
                }
                // 标题
                .list_title {
                    height: 104rpx;
                    line-height: 104rpx;
                    font-family: PingFangSC;
                    color: $uni-text-color;
                    font-weight: $uni-font-weight;
                    font-size: $uni-font-size-big;
                    font-style: normal;
                    text-decoration: none;
                    text-align: left;
                }
                // 每个选项(未选中)
                .list_option {
                    display: inline-block;
                    width: 240rpx;
                    height: 74rpx;
                    border-radius: 16rpx;
                    background-color: #ffffff;
                    text-align: center;
                    line-height: 74rpx;
                    font-family: PingFangSC;
                    color: #666666;
                    font-weight: $uni-font-weight;
                   font-size:$uni-font-size-26;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                    margin: 0 0 20rpx 20rpx;
                }
                // 每个选项(选中)
                .list_option_checked {
                    display: inline-block;
                    width: 232rpx;
                    height: 66rpx;
                    border-radius: 16rpx;
                    background-color: #ffffff;
                    text-align: center;
                    line-height: 66rpx;
                    font-family: PingFangSC;
                    color: $uni-color-primary;
                    font-weight: $uni-font-weight;
                   font-size:$uni-font-size-26;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                    border: 4rpx solid $uni-color-primary;
                    margin: 0 0 20rpx 20rpx;
                }
            }
        }
    }
</style>